<template>
  <div class="w-[350px] p-5 flex flex-col mindmap-left">
    <h3 class="h-7 text-5 text-center leading-[28px] title">思维导图创作中心</h3>
    <!--下面表单部分-->
    <div class="flex-grow overflow-y-auto overflow-x-hidden">
      <div class="mt-[30ppx]">
        <el-text tag="b">您的需求</el-text>
        <el-input
          v-model="formData.prompt"
          maxlength="1024"
          rows="12"
          class="w-100% mt-15px"
          input-style="border-radius: 7px;"
          placeholder="请输入提示词，让AI帮你完善"
          show-word-limit
          type="textarea"
        />
        <el-button
          class="!w-full mt-[15px] liner-btn-opacity liner-btn"
          :disabled="!formData.prompt.trim()"
          :loading="isGenerating"
          @click="emits('submit', formData)"
        >
          开始生成
        </el-button>
      </div>
      <div class="mt-[30px]">
        <el-text tag="b">使用已有内容生成/修改已生成内容</el-text>
        <el-input
          v-model="generatedContent"
          maxlength="1024"
          rows="12"
          class="w-100% mt-15px"
          input-style="border-radius: 7px;"
          placeholder=""
          show-word-limit
          type="textarea"
        />
        <el-button
          class="!w-full mt-[15px] liner-btn-opacity liner-btn"
          @click="emits('directGenerate', generatedContent)"
          :disabled="isGenerating || !generatedContent"
        >
          开始/重新生成
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, reactive, useTemplateRef } from "vue";
import { MindMapContentExample } from "@/utils/ai/constants";

const emits = defineEmits(["submit", "directGenerate"]);
let { isGenerating } = defineProps({
  isGenerating: {
    type: Boolean,
    default: false,
  },
});
// 提交的提示词字段
const formData = reactive({
  prompt: "",
});

// const generatedContent = ref(MindMapContentExample); // 已有的内容
const generatedContent = ref(""); // 已有的内容

defineExpose({
  setGeneratedContent(newContent) {
    // 设置已有的内容，在生成结束的时候将结果赋值给该值
    generatedContent.value = newContent;
  },
  setPrompt(prompt) {
    // 设置已有的内容，在生成结束的时候将结果赋值给该值
    formData.prompt = prompt;
  },
  getPrompt() {
    return formData.prompt;
  },
});
</script>

<style lang="scss" scoped>
.title {
  color: var(--el-color-primary);
}
.mindmap-left {
  background-color: var(--img-group-bg);
}
</style>
